<script setup>
import { ref } from "vue";

const active=ref(0);
const chartsTab=ref([
  {title:'全部',content:'内容1'},
  {title:'都市',content:'内容2'},
  {title:'历史',content:'内容3'},
  {title:'科幻',content:'内容4'},
  {title:'全部',content:'内容1'},
  {title:'都市',content:'内容2'},
  {title:'历史',content:'内容3'},
  {title:'科幻',content:'内容4'},
  {title:'全部',content:'内容1'},
  {title:'都市',content:'内容2'},
  {title:'历史',content:'内容3'},
  {title:'科幻',content:'内容4'},
])

</script>

<template >
  <div class="chartsTab">


    <van-tabs v-model:active="active">
      <van-tab :title="v.title" v-for="(v,i) in chartsTab" :key="i">{{ v.content }}</van-tab>
    </van-tabs>



    <div class="TBox">
      <div class="box-item">11</div>
      <div class="box-item">22</div>
      <div class="box-item">33</div>
      <div class="box-item">44</div>
      <div class="box-item">55</div>
      <div class="box-item">66</div>
      <div class="box-item">77</div>
      <div class="box-item">88</div>
    </div>
  </div>
</template>

<!-- 本地 -->
<style scoped>

</style>

<!-- 全局 -->
<style>

/* 父元素 */
.TBox{
  display: flex;
  overflow-x: auto;
}

/* 子元素 */
.box-item{
  width: 100px;
  background-color:#eee;
  flex-shrink: 0;       
  margin: 0 5px;
  border: 1px solid red;
}

/* 横向滚动条 */
.TBox::-webkit-scrollbar{
  display: none;
}

</style>